{%-macro static_file(type, filename_or_url, local=True) -%}
    {%- if local -%}
        {%- set filename_or_url = url_for('static', filename=filename_or_url) -%}
    {%-endif -%}
    {%- if type=='css'-%}
        <link rel="stylesheet" href="{{ filename_or_url }}" type="text/css">
    {%- elif type=="js"-%}
        <script type="text/javascript" src="{{ filename_or_url }}"></script>
    {%- elif type=="icon"-%}
        <link rel="icon" href="{{ filename_or_url }}">
    {%- endif -%}
{%- endmacro -%}

{% macro form_field(field) %}
    {{ field.label }}<br>
    {{ field(**kwargs) }}<br>
    {% if field.errors %}
        {% for error in field.errors %}
            <small class="ex">{{ error }}</small><br>
        {% endfor %}
    {% endif %}
{% endmacro %}

{% macro table_df(df) %}
    {% if not df.empty %}
        <table class="table table-striped">
            <thead>
            <tr>
                {%- for column in df.columns.tolist() -%}
                    <th>{{ column }}</th>
                {%- endfor -%}
            </tr>
            </thead>
            {%- for col in df.values -%}
                <tr>
                    {%- for value in col -%}
                        <th>{{ value }}</th>
                    {%- endfor -%}
                </tr>
            {%- endfor -%}
        </table>
    {% else %}
        <h5>No posts.</h5>
    {% endif %}
{% endmacro %}

{% macro  pyecharts_js(div_id,date_url,n_time=None,increment_url=None) %}
    {% if n_time == None %}
        <script>
            $(
                function () {
                    var chart = echarts.init(document.getElementById('{{ div_id}}'), 'white', {renderer: 'canvas'});   // getElemementBYID("名称")  和上面的DIV  的ID要一样
                    $.ajax({
                        type: "GET",
                        url: "{{ url_for(date_url) }}",
                        dataType: 'json',
                        success: function (result) {
                            chart.setOption(result);
                        }
                    });
                }
            )
        </script>
    {% else %}
        {% if increment_url == None %}
            <script>
                var chart = echarts.init(document.getElementById('{{ div_id}}'), 'white', {renderer: 'canvas'});

                $(
                    function () {
                        fetchData(chart);
                        setInterval(fetchData, {{n_time}});
                    }
                );

                function fetchData() {
                    $.ajax({
                        type: "GET",
                        url: "{{ url_for(date_url) }}",
                        dataType: 'json',
                        success: function (result) {
                            chart.setOption(result);
                        }
                    });
                }
            </script>
        {% else %}
            <script>
                var chart = echarts.init(document.getElementById('{{ div_id}}'), 'white', {renderer: 'canvas'});
                var old_data = [];
                $(
                    function () {
                        fetchData(chart);
                        setInterval(getDynamicData, {{n_time}});
                    }
                );

                function fetchData() {
                    $.ajax({
                        type: "GET",
                        url: "{{ url_for(date_url) }}",
                        dataType: "json",
                        success: function (result) {
                            chart.setOption(result);
                            old_data = chart.getOption().series[0].data;
                        }
                    });
                }

                function getDynamicData() {
                    $.ajax({
                        type: "GET",
                        url: "{{ url_for(increment_url) }}",
                        dataType: "json",
                        success: function (result) {
                            old_data.push([result.name, result.value]);
                            chart.setOption({
                                series: [{data: old_data}]
                            });
                        }
                    });
                }

            </script>
        {% endif %}
    {% endif %}
{% endmacro %}